CSS Paint Worklet：利用 Canvas API 释放自定义图形的强大力量

网页设计的世界在不断发展。作为开发人员，我们一直在寻找创建更丰富、更具吸引力的用户体验的方法。虽然传统的 CSS 提供了大量的样式工具包，但有时我们需要更多的东西——一种摆脱预定义形状和效果限制的方法。这就是 CSS Paint Worklet（Houdini 项目的一部分）的用武之地。它们允许您直接在 CSS 中定义自定义绘图函数，从而开启一个全新的视觉可能性世界。

什么是 CSS Paint Worklet？

CSS Paint Worklet 本质上是一个 JavaScript 模块，它定义了一个能够直接绘制到背景、边框或任何其他接受图像的属性中的函数。您可以将其视为一个小型、专门的 JavaScript 程序，可以由您的 CSS 调用来绘制视觉元素。这是通过利用 Canvas API 完成的，Canvas API 是在浏览器中创建 2D 图形的强大工具。

使用 Paint Worklet 的主要好处是性能。因为它们在单独的线程中运行（感谢 Worklet API），所以它们不会阻塞主线程，即使在处理复杂的图形时，也能确保流畅且响应迅速的用户体验。

为什么要使用 Paint Worklet？

• 性能：在单独的线程中运行，防止主线程阻塞。这可以带来更流畅的动画和更具响应性的 UI，这对于保持高质量的用户体验至关重要，尤其是在处理能力有限的设备上。
• 自定义：创建超出标准 CSS 功能范围的独特而复杂的设计。想象一下直接在 CSS 中生成复杂的图案、动态纹理或交互式可视化效果。
• 可重用性：定义一次自定义绘图逻辑，并在整个网站中重复使用。这可以提高代码的可维护性并减少冗余，从而使您的 CSS 更高效且更易于管理。
• 动态样式：利用 CSS 自定义属性（变量）来动态控制 paint 函数的行为和外观。这使您可以创建响应用户交互、数据更改或其他动态因素的图形。

了解 Canvas API

Canvas API 是 Paint Worklet 的引擎。它提供了一组 JavaScript 函数，用于将形状、图像、文本等绘制到矩形画布元素上。您可以将其视为一块空白的石板，您可以在其中以编程方式创建任何您想要的视觉元素。

以下是一些需要理解的关键概念：

• Canvas 元素：进行绘图的 HTML 元素。虽然在使用 Paint Worklet 时您不会直接创建一个 <canvas> 元素，但 API 提供了底层的绘图表面。
• 上下文：上下文对象提供了绘图的方法和属性。您通常使用 canvas.getContext('2d') 获取 2D 渲染上下文。
• 路径：定义形状的一系列绘图命令。您可以使用 moveTo()、lineTo()、arc() 和 bezierCurveTo() 等方法创建路径。
• 样式：使用 fillStyle（用于填充形状）、strokeStyle（用于轮廓形状）和 lineWidth 等属性控制绘图的外观。
• 变换：应用缩放、旋转和平移等变换来操纵绘图的位置和方向。

创建您的第一个 Paint Worklet

让我们通过一个简单的例子来说明如何创建和使用 Paint Worklet。我们将创建一个绘制对角条纹图案的 Worklet。

1. 创建 Worklet 文件 (striped.js)

创建一个名为 `striped.js` 的新 JavaScript 文件。此文件将包含我们 Paint Worklet 的代码。

```javascript // striped.js registerPaint('striped', class { static get inputProperties() { return ['--stripe-color']; } paint(ctx, geom, properties) { const stripeColor = properties.get('--stripe-color').toString(); const width = geom.width; const height = geom.height; ctx.fillStyle = stripeColor || 'black'; for (let i = 0; i < width + height; i += 20) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(0, i); ctx.lineTo(0, i + 10); ctx.lineTo(i + 10, 0); ctx.closePath(); ctx.fill(); } } }); ```

说明：

• registerPaint('striped', class { ... })：使用名称“striped”注册我们的 Paint Worklet。这是您将在 CSS 中使用此名称来引用此 Worklet。
• static get inputProperties() { return ['--stripe-color']; }：这定义了我们的 Worklet 将使用的 CSS 自定义属性。在本例中，我们使用一个名为 `--stripe-color` 的自定义属性来控制条纹的颜色。
• paint(ctx, geom, properties) { ... }：这是进行绘图的主要函数。它接收三个参数：
  • ctx：Canvas API 的 2D 渲染上下文。您将在此处调用所有绘图方法。
  • geom：一个包含被绘制元素的宽度和高度的对象。
  • properties：一个 StylePropertyMapReadOnly 对象，包含在 inputProperties 中指定的输入属性的值。
• ctx.fillStyle = stripeColor || 'black';：将填充颜色设置为 `--stripe-color` 自定义属性的值，如果未定义该属性，则设置为黑色。
• for 循环迭代以绘制条纹，创建一系列对角线。

2. 在您的 HTML 中注册 Worklet

在 CSS 中使用 Worklet 之前，您需要使用 JavaScript 注册它。

```html ```

说明：

• 我们首先检查浏览器是否支持 paintWorklet API。
• 如果是，我们使用 CSS.paintWorklet.addModule('striped.js') 来注册我们的 Worklet。
• 我们还包含一个不支持 Paint Worklet 的浏览器的回退。这可能涉及使用静态图像或其他 CSS 技术来实现类似的效果。

3. 在您的 CSS 中使用 Worklet

现在您可以在 CSS 中使用 paint() 函数来将 Worklet 应用于任何元素。

```css .striped-element { width: 200px; height: 100px; --stripe-color: steelblue; background-image: paint(striped); } ```

说明：

• 我们将 background-image 属性设置为 paint(striped)，这告诉浏览器使用我们注册的 Worklet 来绘制元素的背景。
• 我们还将 `--stripe-color` 自定义属性设置为 `steelblue` 以控制条纹的颜色。您可以将此值更改为任何有效的 CSS 颜色来自定义外观。

高级技巧

现在您已经基本了解了 Paint Worklet，让我们探索一些更高级的技巧。

使用 CSS 自定义属性进行动态样式设置

Paint Worklet 最强大的功能之一是能够使用 CSS 自定义属性（变量）来动态控制其行为和外观。这使您可以创建响应用户交互、数据更改或其他动态因素的图形。

例如，您可以使用自定义属性来控制 `striped` Worklet 中条纹的粗细：

```javascript // striped.js registerPaint('striped', class { static get inputProperties() { return ['--stripe-color', '--stripe-thickness']; } paint(ctx, geom, properties) { const stripeColor = properties.get('--stripe-color').toString(); const stripeThickness = parseInt(properties.get('--stripe-thickness').toString(), 10) || 10; const width = geom.width; const height = geom.height; ctx.fillStyle = stripeColor || 'black'; for (let i = 0; i < width + height; i += stripeThickness * 2) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(0, i); ctx.lineTo(0, i + stripeThickness); ctx.lineTo(i + stripeThickness, 0); ctx.closePath(); ctx.fill(); } } }); ```

然后，在您的 CSS 中：

```css .striped-element { width: 200px; height: 100px; --stripe-color: steelblue; --stripe-thickness: 20; background-image: paint(striped); } .striped-element:hover { --stripe-thickness: 10; } ```

这将使条纹在用户将鼠标悬停在元素上时变细。

创建复杂的形状和图案

Canvas API 提供了广泛的方法来绘制复杂的形状和图案。您可以使用这些方法来创建从简单的几何形状到复杂的 fractal 图案的所有内容。

例如，您可以创建一个绘制棋盘图案的 Paint Worklet：

```javascript registerPaint('checkerboard', class { paint(ctx, geom) { const size = 20; const width = geom.width; const height = geom.height; for (let i = 0; i < width; i += size) { for (let j = 0; j < height; j += size) { if ((i / size + j / size) % 2 === 0) { ctx.fillStyle = 'black'; } else { ctx.fillStyle = 'white'; } ctx.fillRect(i, j, size, size); } } } }); ```

然后在您的 CSS 中使用它：

```css .checkerboard-element { width: 200px; height: 100px; background-image: paint(checkerboard); } ```

实现动画

可以通过更新控制其外观的自定义属性随时间变化来使用 Paint Worklet 创建动画。您可以使用 CSS 动画、JavaScript 动画，甚至 Web Animations API 来驱动这些更改。

例如，您可以为 `--stripe-offset` 自定义属性设置动画以创建移动条纹效果：

```javascript // animated-stripes.js registerPaint('animated-stripes', class { static get inputProperties() { return ['--stripe-color', '--stripe-offset']; } paint(ctx, geom, properties) { const stripeColor = properties.get('--stripe-color').toString(); const stripeOffset = parseFloat(properties.get('--stripe-offset').toString()); const width = geom.width; const height = geom.height; const stripeThickness = 20; ctx.fillStyle = stripeColor || 'black'; for (let i = -width; i < width + height; i += stripeThickness * 2) { const offset = i + stripeOffset; ctx.beginPath(); ctx.moveTo(offset, 0); ctx.lineTo(0, offset); ctx.lineTo(0, offset + stripeThickness); ctx.lineTo(offset + stripeThickness, 0); ctx.closePath(); ctx.fill(); } } }); ``` ```css .animated-stripes-element { width: 200px; height: 100px; --stripe-color: steelblue; --stripe-offset: 0; background-image: paint(animated-stripes); animation: moveStripes 5s linear infinite; } @keyframes moveStripes { from { --stripe-offset: 0; } to { --stripe-offset: 100; } } ```

最佳实践和注意事项

• 性能：虽然 Paint Worklet 旨在实现高性能，但优化代码仍然很重要。避免不必要的计算并使用有效的绘图技术。使用 Chrome DevTools 性能面板等工具来识别和解决任何瓶颈。
• 浏览器兼容性：Paint Worklet 是一项相对较新的技术，因此浏览器支持仍在不断发展。确保为不支持它们的浏览器提供回退。[Can I use](https://caniuse.com/?search=paint%20api) 网站提供了有关浏览器支持的最新信息。
• 代码组织：保持您的 Worklet 代码干净且组织良好。使用注释来解释您的逻辑并将复杂的任务分解为更小、更易于管理的函数。考虑使用 Webpack 或 Parcel 等模块打包器来管理您的依赖项并简化您的构建过程。
• 可访问性：确保您的自定义图形对所有用户都可访问。为图像提供替代文本描述，并使用 ARIA 属性来提供有关您的自定义 UI 元素的语义信息。考虑视觉障碍用户的需求，并确保您的设计与辅助技术兼容。
• 安全性：由于 Paint Worklet 执行 JavaScript，因此请注意安全影响。避免使用不受信任的数据或执行可能有害的代码。遵循安全编码的最佳实践，以保护您的用户免受安全漏洞的侵害。定期检查您的代码是否存在潜在的安全风险，并使您的依赖项保持最新以解决任何已知漏洞。

真实世界的例子

Paint Worklet 正被用于各种真实世界的应用程序中，以创造令人惊叹且引人入胜的用户体验。

• 交互式数据可视化：Paint Worklet 可用于直接在 CSS 中创建动态和交互式数据可视化。这使您可以创建响应用户交互和数据更改的仪表板、图表和图形。考虑实时股票市场跟踪器或交互式地理地图等示例。
• 自定义 UI 组件：Paint Worklet 可用于创建超出标准 HTML 元素限制的自定义 UI 组件。这使您可以创建根据您的特定需求量身定制的独特且具有视觉吸引力的用户界面。示例包括自定义进度条、滑块和按钮。
• 艺术效果：Paint Worklet 可用于创建各种艺术效果，例如纹理、图案和动画。这使您可以为您的网页设计增添一丝创意和个性。考虑创建自定义背景、边框或装饰元素。
• 游戏开发：Canvas API 在 Paint Worklet 中的使用为直接在您网站的样式中创建轻量级游戏元素开辟了道路。可以集成简单的动画或视觉反馈，而无需繁重的 JavaScript 开销。

结论

CSS Paint Worklet 是一个强大的工具，可以直接在 CSS 中创建自定义、动态且高性能的图形。通过利用 Canvas API 并在单独的线程中运行，它们提供了灵活性和性能的独特组合。随着浏览器支持的不断改进，Paint Worklet 有望成为 Web 开发工具包中越来越重要的一部分。

尝试提供的示例，浏览 Canvas API 文档，并释放您的创造力！可能性是无限的。

进一步学习

• MDN Web Docs: CSS Painting API
• Houdini.how: Paint API
• Smashing Magazine: An Introduction to the CSS Paint API
• Can I Use: CSS Paint API Browser Support